<template>
    <L7MapWithGaode :mapOnloadCB="mapOnloadCB"></L7MapWithGaode>
</template>

<script lang="ts">
import {Scene, PolygonLayer, PointLayer, LineLayer} from '@antv/l7';
import {defineComponent, onMounted, ref} from "vue"
import L7MapWithGaode from "@/component/common/L7MapWithGaode.component.vue"

export default defineComponent({
    name: "L7.addScatter6",
    components: {L7MapWithGaode},
    setup() {

        const mapOnloadCB = (scene: Scene) => {
            scene.setZoomAndCenter(13, [120, 30])

            const layer = new PointLayer()
                .source(
                    [
                        {
                            lng: 120,
                            lat: 30
                        }
                    ],
                    {
                        parser: {
                            type: 'json',
                            x: 'lng',
                            y: 'lat'
                        }
                    }
                )
                .shape('radar')
                .size(100)
                .color('#d00')
                .style({
                    speed: 5
                })
                .animate(true);

            scene.addLayer(layer);
        }

        return {
            mapOnloadCB
        }
    }
})
</script>

<style scoped>

</style>
